<template>
    <div>
        <el-card class="box-card organization-tree-subject">
            <el-tree :data="data"
                     :props="defaultProps"
                     default-expand-all
                     @node-click="handleNodeClick">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ data.label}}
                        <el-tag size="mini" type="success" v-if="data.type_id === 0" >{{organization_type[data.type_id]}}</el-tag>
                        <el-tag size="mini" type="warning" v-else-if="data.type_id === 1" >{{organization_type[data.type_id]}}</el-tag>
                        <el-tag size="mini" type="primary" v-else-if="data.type_id === 2" >{{organization_type[data.type_id]}}</el-tag>
                        <el-tag size="mini" v-else >{{organization_type[data.type_id]}}</el-tag>
                    </span>
                    <span>
                          <el-button
                                  type="text"
                                  size="mini"
                                  @click.stop="() => setting(node,data)">
                            科目设置
                          </el-button>

                        <el-button
                                type="text"
                                size="mini"
                                @click.stop="() => preView(node,data)">
                            预览
                          </el-button>
                     </span>
                </span>
            </el-tree>
        </el-card>


        <el-dialog
                title="设置科目"
                :visible.sync="subjectMask"
                width="30%"
                :before-close="handleClose">

            <el-tree
                    v-loading="subject_loading"
                    :data="subjectData"
                    :show-checkbox="showCheckbox"
                    node-key="id"
                    default-expand-all
                    :default-checked-keys="subject_id"
                    :filter-node-method="filterNode"
                    :props="defaultProps"
                    @check-change="handleCheckChange"
                    ref="tree">
            </el-tree>

            <div slot="footer" class="dialog-footer" v-show="showCheckbox">
                <el-button @click="subjectMask = false">取 消</el-button>
                <el-button type="primary" @click="submitSetting()" >确认</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "SubjectBelong",
        data() {
            return {
                data:'',
                subjectData: '',
                organization_type:['SBU','SAU','SDU'],
                subjectMask:false,
                showCheckbox:true,
                defaultProps:{
                    label:'name',
                    children:'children'
                },
                subject_id: [],
                setting_choose_organization_id:'',
                subject_loading:true
            }
        },
        methods: {
            handleCheckChange(data, checked, indeterminate) {
                //获取所有选中的节点 start
                let res = this.$refs.tree.getCheckedNodes()
                let arrDeptId = []
                res.forEach((item) => {
                    arrDeptId .push(item.id)
                })
                this.subject_id = arrDeptId
                //获取所有选中的节点 end
            },
            filterNode(value,data,node) {
                if (value === true) {
                    return true
                }
                for (let i=0;i<value.length;i++) {
                    if (data.id === value[i]) {
                        return true
                    }
                }
                return false
            },
            // 初始化组织树
            initTree() {
                let that = this
                that.$http.post(this.$conf.baseURL + '/queryOrganizationTree', {'id':0})
                    .then(function (res) {
                        that.data = [];
                        that.data.push(res.data.data)
                    })
            },
            // 初始化科目树
            initSubjectTree() {
                let that = this
                that.$http.post(this.$conf.baseURL + '/querySubjectTree',{id:1})
                    .then(function (res) {
                        that.subjectData = []
                        that.subjectData.push(res.data.data)
                    })
            },
            // 科目设置
            setting(node,data) {
                let that = this
                // alert(this.$refs.tree)
                if (this.$refs.tree != undefined) {
                  this.$refs.tree.filter(true)
                }
                that.subjectMask = true
                that.showCheckbox = true
                that.subject_loading = true
                this.setting_choose_organization_id = data.id
                this.$http.post(this.$conf.baseURL + '/querySubjectIdByOrgId',{organization_id:data.id})
                    .then(function (res) {
                        that.subject_id = res.data
                        that.$refs.tree.setCheckedKeys(that.subject_id);
                        that.subject_loading = false
                    }).catch(function (res) {
                        that.subject_id = []
                        that.$refs.tree.setCheckedKeys(that.subject_id);
                        that.subject_loading = false
                 })
            },
            // 提交科目设置
            submitSetting() {
                let that = this
                this.$http.post(this.$conf.baseURL + '/addOrgAndSubject',
                    {
                        organization_id: this.setting_choose_organization_id,
                        subject_id: this.subject_id
                    }).then(function (res) {
                        that.$message({
                            message:'科目设置成功',
                            type:'success'
                        })
                        that.subjectMask = false
                    })
            },
            // 科目预览
            preView(node,data) {
                let that = this
                this.subjectMask = true
                this.showCheckbox = false
                that.subject_loading = true
                this.$http.post(this.$conf.baseURL + '/querySubjectIdByOrgId',{organization_id:data.id})
                    .then(function (res) {
                        that.$refs.tree.filter(res.data)
                        that.subject_loading = false
                    }).catch(function (res) {
                    that.$refs.tree.filter([])
                    that.subject_loading = false
                })
            }
        },
        mounted() {
            this.initTree()
            this.initSubjectTree()
        },
    }
</script>

<style scoped>
    .organization-tree-subject {
        margin-top: 10px;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
